import React, { useState, useEffect, memo } from 'react'
import useApi from './useApi'


// function App() {
//   const [{ data }, setQuery] = useApi()
//   return (
//     <div className="App">
//       {
//         data.map((item, index) => <div key={index}>{item}</div>)
//       }
//       <input type="text" placeholder="请输入搜索值" onChange={(e) => setQuery(e.target.value)}/>
//     </div>
//   )
// }

function Son(props) {
  const { granRef } = props
  return (
    <div>
      <div> i am alien</div>
      <span ref={granRef}>这个是要获取的元素</span>
    </div>
  )
}

class Father extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
        <Son granRef={this.props.granRef}></Son>
      </div>
    )
  }
}

const NewFather = React.forwardRef((props, ref) => {
  return (
    <Father granRef={ref} {...props}/>
  )
})

// grandFather
class App extends React.PureComponent {
  constructor(props) {
    super(props)
  }
  node = null

  componentDidMount() {
    console.log(this.node)
  }

  render() {
    return (
      <div>
        <NewFather ref={(node) => this.node = node}/>
      </div>
    )
  }

}

export default App
